<div class="root">
    <!--header-->
    <div class="header">
        <div class="header-coupon">
            <text class="header-txt font-msyhl">输入券码</text>

            <div class="input-box">
                <input ref="coupon_input" return-key-type="done" v-model="couponValue" maxlength="14" class="input font-msyhl" type="text" @input="oninput"></input>
            </div>
        </div>

        <div class="btn-box">
            <text class="bind-btn font-msyhl" @click="bindCoupon">绑定</text>
            <text class="reset-btn font-msyhl" @click="restCouponVal">重输</text>
        </div>
    </div>

    <!--分类tab-->
    <div class="sort-bar-wrapper">
        <div :class="['sort-bar', index == sortTabs.length -1 ? 'sort-bar-last' : '']" v-for="(s,index) in sortTabs" @click="sortClick(s)">
            <image v-if="type == s.type" resize="cover" class="sort-img" :src="positionIcon"></image>
            <text :class="['sort-txt', type == s.type ? 'sort-txt-active' : 'sort-txt-common']">{{s.title}}</text>
            <text :class="['sort-txt', type == s.type ? 'sort-txt-active' : 'sort-txt-common']">({{index == 0 ? unUsedCount : (index == 1 ? usedCount : outDateCount)}})</text>
        </div>
    </div>

    <!--优惠券列表-->
    <list ref="list" class="list-wrapper">
        <cell class="cell-panel" v-if="couponList.length">
            <div class="coupon-wrapper">
                <div class="coupon-item" v-for="(c, index) in couponList" @click="userCoupon(c)">
                    <image resize="cover" class="coupon-pg" :src="type == 1 ? couponActiveBg : couponUnActiveBg"></image>

                    <div class="coupon-cont">
                        <div class="cont-top">
                            <text class="coupon-price font-msyhl">¥{{c.value}}</text>
                            <text class="coupon-range font-msyhl">{{c.range}}</text>
                        </div>

                        <div class="cont-bot">
                            <text class="coupon-due font-msyhl">{{c.due}}</text>
                            <text class="coupon-title font-msyhl">{{c.utitle}}</text>
                        </div>

                        <div class="coupon-icon">
                            <image v-if="type == 1" resize="stretch" class="coupon-use-icon" :src="couponUseIcon"></image>
                            <image v-else resize="stretch" class="coupon-due-icon" :src="type == 2 ? couponCostIcon : couponDeadIcon"></image>
                        </div>
                    </div>
                </div>
            </div>
        </cell>

        <!--优惠券列表为空-->
        <cell class="cell-panel empty-cell" v-if="pageLoaded && !couponList.length">
            <content-empty :emptyTxt="'暂无数据 ~'"></content-empty>
        </cell>
    </list>
</div>